<template>
  <main class="wss-container">
    <div class="label-box-content">
      <el-row :gutter="30" type="flex">
        <el-col :span="7">
          <NewCard title="一级类别">
            <div class="leftMenu">
              <el-tag
                :key="index"
                v-for="(type, index) in tableData"
                :disable-transitions="false"
                :class="{ tagActive: currentIndex === index }"
                @click="onRowClick(type, index)"
              >
                <p
                  @dblclick="dblclickInput(index)"
                  v-if="tagInput === index ? false : true"
                >
                  {{ type.name }}
                </p>
                <el-input
                  v-else
                  v-model="type.name"
                  @keyup.enter.native="handleInput(type, type.name)"
                  @blur="handleInput(type, type.name)"
                  ref="dbtagInput"
                  clearable
                >
                </el-input>
                <p class="tag-icon">
                  <el-upload
                    ref="upload"
                    list-type="picture"
                    accept=".jpg,.png"
                    :action="'#'"
                    :auto-upload="false"
                    :show-file-list="false"
                    :on-change="getFile"
                    :before-remove="() => false"
                    @click.native="getFileId(type)"
                  >
                    <img :src="type.icon" alt="" />
                  </el-upload>
                </p>
              </el-tag>
              <ComAddButton
                label="添加一级类别"
                @Event-blurInput="handleInputConfirm"
              ></ComAddButton>
            </div>
          </NewCard>
        </el-col>
        <el-col :span="7">
          <NewCard title="二级类别">
            <div class="perInfo">
              <el-tag
                :key="index"
                v-for="(jobTitle, index) in scendtable"
                :disable-transitions="false"
                @click="secendClick(jobTitle, index)"
              >
                <p
                  @dblclick="dblclickJobInput(index)"
                  v-if="jobInput === index ? false : true"
                >
                  {{ jobTitle.name }}
                </p>
                <el-input
                  v-else
                  v-model="jobTitle.name"
                  @keyup.enter.native="handleJobInput(jobTitle, jobTitle.name)"
                  @blur="handleJobInput(jobTitle, jobTitle.name)"
                  ref="dbJobInput"
                  clearable
                >
                </el-input>
                 <p class="tag-icon">
                  <el-upload
                    ref="upload"
                    list-type="picture"
                    accept=".jpg,.png"
                    :action="'#'"
                    :auto-upload="false"
                    :show-file-list="false"
                    :on-change="getFile"
                    :before-remove="() => false"
                    @click.native="getsecendFileId(jobTitle)"
                  >
                    <img :src="jobTitle.icon" alt="" />
                  </el-upload>
                </p>
               
              </el-tag>
              <ComAddButton
                label="添加二级类别"
                @Event-blurInput="handleJobConfirm"
              ></ComAddButton>
            </div>
          </NewCard>
        </el-col>
        <el-col :span="10">
          <NewCard title="合同名称">
            <div class="">
              <el-table
                :data="thridtable"
                :show-header="false"
                style="width: 100%"
                :border="border"
                :highlight-current-row="highlight"
              >
                <el-table-column label="Name" prop="name"> </el-table-column>
                <el-table-column label="操作">
                  <template slot-scope="scope">
                    <div class="edit-box">
                      <span
                        class="emlemt"
                        @click="
                          content = true;
                          contentlist(scope.row);
                        "
                        >内容</span
                      >
                      <span
                        class="info"
                        style="margin-left: 10px"
                        @click="
                          factor = true;
                          factorlisttable(scope.row);
                        "
                        >要素</span
                      >
                    </div>
                  </template>
                </el-table-column>
              </el-table>
            </div>
            <div>
              <el-button class="hetongbtn" @click="contentname = true"
                >+添加合同类容</el-button
              >
            </div>
          </NewCard>
        </el-col>
        <!-- 合同信息 -->
        <Comdrawer
          size="70%"
          title="合同信息"
          @eventColse="contentClose"
          :drawer="content"
        >
          <div class="drawerMain">
            <el-row :gutter="20">
              <el-col :span="24">
                <div class="lineItem">
                  <div
                    class="lItemContent"
                    v-for="(item, index) in contractList.info"
                    :key="index"
                  >
                    <div @dblclick="changetextarea(item, index)">
                      <span v-show="!item.edit_name">
                        <span v-html="item"></span>
                      </span>
                      <div class="btn">
                        <el-button
                          size="mini"
                          @click="deletinfo(contractList, index)"
                          >删除</el-button
                        >
                      </div>
                    </div>
                    <el-input
                      type="textarea"
                      @blur="secendenddateblur()"
                      @keyup.enter.native="$event.target.blur"
                      clearable
                      v-show="item.edit_name"
                      size="mini"
                      placeholder="请输入内容"
                      v-model="textarea"
                      maxlength="30"
                      show-word-limit
                    >
                    </el-input>
                    <el-divider></el-divider>
                  </div>
                </div>
                <div class="switch" style="margin: 10px">
                  <el-switch
                    style="display: block"
                    v-model="statusinfo"
                    inactive-text="是否手动添加要素"
                  >
                  </el-switch>
                </div>
               
               <WangEditor key="1" ref="wangEditor" :list="textContent">
                 </WangEditor>
                <div class="btnrow">
                  <el-button
                    type="primary"
                    size="mini"
                    @click="addscontractinfo(contractList)"
                    >新增</el-button
                  >
                  <el-button type="primary" size="mini" @click="factorinfo"
                    >要素信息</el-button
                  >
                </div>
              </el-col>
            </el-row>
          </div>
        </Comdrawer>

        <Comdrawer
          size="50%"
          title="合同名称"
          @eventColse="contentnameClose"
          :drawer="contentname"
        >
          <div class="drawerMain">
            <el-row :gutter="20">
              <el-col :span="20">
                <el-form
                  :model="contentForm"
                  :rules="contenrules"
                  ref="contentForm"
                  label-width="100px"
                  class="demo-ruleForm"
                >
                  <el-form-item label="合同名称" prop="element">
                    <el-input v-model="contentForm.name"></el-input>
                  </el-form-item>
                    <el-form-item label="是否添加要素" prop="delivery">
                      <el-switch v-model="contentForm.delivery"></el-switch>
                    </el-form-item>
                 
                  <el-form-item label="合同内容" prop="keypoint">
                    <!-- <Editor></Editor> -->
                    <WangEditor key="" ref="textContentname" :list="textContentname"></WangEditor>
                  </el-form-item>
                  <el-form-item>
                    
                    <el-button
                      type="primary"
                      size="mini"
                      @click="addContentname(contentForm)"
                      >确定</el-button
                    >
                    <el-button @click="resetForm" size="mini" type="primary"
                      >重置</el-button
                    >
                  </el-form-item>
                </el-form>
              </el-col>
            </el-row>
          </div>
        </Comdrawer>
        <!-- 合同要素 -->
        <Comdrawer
          size="70%"
          title="要素信息"
          @eventColse="factorClose"
          :drawer="factor"
        >
          <div class="yasuinfo">
            <el-row :gutter="30" type="flex">
              <el-col :span="14">
                <NewCard :isright="true" title="内容">
                  <div class="businTalbe">
                    <ComTable
                      :config="config"
                      :pagination="{
                        total: pageing.total,
                        pageNum: pageing.pageNum,
                        pageSize: pageing.pageSize,
                      }"
                      :list="factortable"
                      :modes="tableModes"
                      @EventRowClick="RowClickFn"
                    >
                    </ComTable>
                  </div>
                </NewCard>
              </el-col>
              <el-col :span="10">
                <div class="infoExpert">
                  <NewCard title="详情">
                    <div class="btninfo">
                      <el-button size="mini" type="primary" @click="deleteinfo"
                        >刪除</el-button
                      >
                    </div>
                    <div class="perInfo">
                      <el-row>
                        <el-col :span="24">
                          <el-form
                            :model="ruleForm"
                            :rules="rules"
                            ref="ruleForm"
                            label-width="100px"
                            class="demo-ruleForm"
                          >
                            <el-form-item label="要素名称" prop="element">
                              <el-input v-model="ruleForm.element"></el-input>
                            </el-form-item>
                            <el-form-item label="要素同义词" prop="synonym">
                              <el-input v-model="ruleForm.synonym"></el-input>
                            </el-form-item>
                            <el-form-item label="要素说明" prop="keypoint">
                              <el-input
                                type="textarea"
                                :autosize="{ minRows: 4, maxRows: 8 }"
                                v-model="ruleForm.keypoint"
                              ></el-input>
                            </el-form-item>
                            <el-form-item>
                              <el-button
                                type="primary"
                                size="mini"
                                @click="submitForm('ruleForm')"
                                >确定</el-button
                              >
                              <el-button
                                @click="resetForm"
                                size="mini"
                                type="primary"
                                >重置</el-button
                              >
                            </el-form-item>
                          </el-form>
                        </el-col>
                      </el-row>
                    </div>
                  </NewCard>
                </div>
              </el-col>
            </el-row>
          </div>
        </Comdrawer>
      </el-row>
    </div>
  </main>
</template>
<script>
import NewCard from "@/wss/components/newCard.vue";
import Comdrawer from "../../../components/Comdrawer.vue";
import ComAddButton from "../../../components/tablecomponents.vue";
import ComTable from "../../../components/comTable.vue";
import WangEditor from "../../../components/wangEditor.vue";

import {
  getContractTypeListApi,
  editContractTypeListApi,
  getscontractListApi,
  getscontractgetInfoApi,
  editscontractinfoApi,
  deletecontractListApi,
  addscontractListApi,
  addContractTypeListApi,
  getfactorListApi,
  editfactorListApi,
  addfactorListApi,
  deletfactorListApi,
} from "../../../newApi_3-24/base/contractType";

export default {
  name: "contract",
  components: { NewCard, ComAddButton, Comdrawer, WangEditor, ComTable },
  data() {
    return {
      vshow: false,

      //是否显示分页
      isShowpagination: false,
      border: false,
      //左侧菜单高亮
      highlight: true,
      //查合同抽屉是否显示
      content: false,
      //查要素侧抽屉是否显示
      factor: false,
      //合同名称抽屉是否显示
      contentname: false,
      //一级分类类型index
      currentIndex: 0,
      //一级类型tag显示输入框
      tagInput: "",
      //一级分类数据集合
      tableData: [],
      //二级分类的数据集合
      scendtable: [],
      //合同名称的数据集合
      thridtable: [],
      //合同信息数据集合
      contractList: [],
      //文本域的数据集合
      textContent: [],
      //合同名称新增文本域
      textContentname:[],
      //滑块切换状态
      statusinfo: true,
      //一级类别当前选中pid
      fristid: "",
      //二级类别当前选中pid
      secendid: "",
      //收集输入框的数据
      inputValue: {},
      //双击一级类别tag显示输入框
      tagInput: "",
      //判断二级类型是否显示
      jobVisible: false,
      jobTitleValue: "",
      //双击二级类别tag显示输入框
      jobInput: "",
      //单击图标当前编辑的id和base64图片字符串
      editDbIcon: {
        id: "",
        base64: "",
        type: "",
        status: "",
      },
      //合同名称新增表单
      contentForm:{
       name:"",
       info:[],
       type:"",
       pid:""
      },
      //要素表格数据
      factortable: [],
      // 表格配置
      config: {
        // border: true,
        isAdd: false,
        loading: false,
      },
      tableModes: [
        // {
        //   label: "要数编号",
        //   mode: "number",
        //   width: 100,
        //   showOverflowTooltip: true,
        // },
        {
          label: "要素名称",
          mode: "element",
          width: 100,
          showOverflowTooltip: true,
        },
        {
          label: "要素同义词",
          mode: "synonym",
          width: 100,
          showOverflowTooltip: true,
        },

        {
          label: "要素说明",
          mode: "keypoint",
          width: 320,
          showOverflowTooltip: true,
        },
      ],
      // 表格分页参数
      pageing: { pageNum: 1, pageSize: 10, total: 0 },
      //编辑的信息
      textarea: "",
      //要素刪除id
      ysid: "",
      //要素详情信息存储、
      infotable: [],
      //表单
      ruleForm: {
        element: "",
        synonym: "",
        keypoint: "",
      },
      contenrules: {
        name: [{ required: true, message: "请输入合同名称", trigger: "blur" }],
        info: [
          { required: true, message: "请填写合同内容", trigger: "blur" },
        ],
      },
      rules: {
        element: [{ required: true, message: "要素名称", trigger: "blur" }],
        synonym: [{ required: true, message: "要素同义词", trigger: "blur" }],

        keypoint: [
          { required: true, message: "请填写要素说明", trigger: "blur" },
        ],
      },
    };
  },
  mounted() {
    // this.selectChangeFirst(1);
  },
  created() {
    this.getContractTypefn();
  },
  methods: {
 
    //一级类别 input-new-tag"
    showInput() {
      this.inputVisible = true;
      this.$nextTick((_) => {
        this.$refs.saveTagInput.$refs.input.focus();
      });
    },
    //一级类别 input确认之后执行的函数
    handleInputConfirm(row) {
      let data = {
        pid: "1",
        type: "1", //一级类别的状态为1，二级为2
        name: row.name,
        base64: row.base64,
        status: "0",
      };
      this.addContractTypeListfn(data);
      setTimeout(() => {
        this.getContractTypefn();
      }, 50);
    },
    //一级类别 双击显示输入框
    dblclickInput(index) {
      console.log(index);
      setTimeout(() => {
        this.$refs.dbtagInput[0].focus();
      }, 50);
      this.tagInput = index;
    },
    //一级类别 失去焦点或者回车修改名称
    handleInput(type, typeName) {
      console.log();
      let data = {
        id: type.id,
        name: type.name,
        status: type.status,
        pid: type.pid,
        type: type.type,
      };
      if (!typeName) {
        this.$message.error("输入值不能为空！");
        return;
      }
      this.tagInput = "";
      //修改的接口
      this.editContractTypefn(data);
    },
    //二级类别 双击显示输入框
    dblclickJobInput(index) {
      console.log(index);
      setTimeout(() => {
        this.$refs.dbJobInput[0].focus();
      }, 50);
      this.jobInput = index;
    },
    //二级类别 失去焦点或者回车修改名称
    handleJobInput(row, rowname) {
      console.log(this.fristid, "this.fristid");
      let rows = {
        name: row.name,
        status: row.status,
        pid: "2",
        type: "2",
      };
      if (!rowname) {
        this.$message.error("输入值不能为空！");
        return;
      }
      this.jobInput = "";
      //修改的接口
      this.editContractTypefn(rows);
    },
    handleJobConfirm(row) {
      //一级类别的状态为1，type为1 pid为1，二级时type为2 pid等于一级类别的id
      let data = {
        type: "2",
        name: row.name,
        pid: this.fristid,
        base64: row.base64,
        status: "0",
      };
      this.addContractTypeListfn(data);
      this.getContractTypefn();
    },
    //通过getFile方法获取文件信息
    getFileId(type) {
      this.editDbIcon.id = type.id;
    },
    getFile(file, fileList) {
      //上传判断
      const isJPG = file.raw.type === "image/jpeg";
      const isLt2M = file.raw.size / 1024 / 1024 < 2;
      if (!isJPG) {
        this.$message.error("上传头像图片只能是 JPG 格式!");
        return;
      }
      if (!isLt2M) {
        this.$message.error("上传头像图片大小不能超过 2MB!");
        return;
      }

      if (fileList && fileList.length > 1) {
        fileList.shift();
      }
      this.imageUrl = file.url;
      this.getBase64(file.raw).then((res) => {
        const params = res;
        this.editDbIcon.base64 = params.split(",")[1];
        //修改的接口
        this.editContractTypefn(this.editDbIcon);
        //延时执行刷新
        setTimeout(() => {
          //更新专家类型职称列表
          this.getContractTypefn();
        }, 50);
      });
    },
    //二级类别图片编辑
    getsecendFileId(type){
      this.editDbIcon.id = type.id;
    },
    // 图片转base64编码：
    getBase64(file) {
      return new Promise(function (resolve, reject) {
        const reader = new FileReader();
        let imgResult = "";
        reader.readAsDataURL(file);
        reader.onload = function () {
          // console.log(reader.result,'reader.result')
          imgResult = reader.result;
        };
        reader.onerror = function (error) {
          reject(error);
        };
        reader.onloadend = function () {
          resolve(imgResult);
        };
      });
    },

    //获取合同类型
    async getContractTypefn() {
      let { code, rows } = await getContractTypeListApi();
      if (code != 200) return;
      this.tableData = rows;
    },
    //类型编辑
    async editContractTypefn(data) {
      let { code, rows } = await editContractTypeListApi(data);
      if (code == 200) {
        this.$message({
          message: "修改成功",
          type: "success",
        });
      } else {
        this.$message({
          message: msg,
          type: "error",
        });
      }
    },
    // 添加一级类型
    async addContractTypeListfn(data) {
      let result = await addContractTypeListApi(data);
      console.log(result);
      if (result.code == 200) {
        this.$message({
          message: "添加成功",
          type: "success",
        });
      } else {
        // this.$message.error("提交失败");
        return Promise.reject(result.message);
      }
    },
    //合同信息的id查询
    async getsContractInfoApifn(id) {
      let { code, data } = await getscontractgetInfoApi(id);
      if (code != 200) return;
      this.contractList = data;
    },

    //合同名称查询
    async getscontractListApi() {
      const _this = this;
      let { code, data } = await getscontractListApi();
      if (code != 200) return;
      this.thridtable = data.rows;
    },
       //合同内容的新增
  async  addContentname(item){
      item.pid=this.secendid
      item.type=3
      let content = this.$refs.textContentname.getEditorDataFn();
      if (content) {
        item.info.push(content);
        console.log(item,"123")
        let { code, msg } = await addscontractListApi(item);
        if (code != 200) return;
        this.$message({
          message: msg,
          type: "success",
        });
        this.contentname=false
      this.getscontractListApi(item.id);
        
      } else {
        this.$message({
          message: "请输入新增信息",
          type: "warning",
        });
      }
      
    },
    //合同信息的显示隐藏｛
    contentClose() {
      this.content = false;
    },
    //要素信息显示隐藏
    factorClose() {
      this.factor = false;
    },
    contentnameClose() {
      this.contentname = false;
      this.contentForm={}
    },
    //从合同信息跳转对应要素表
    factorinfo() {
      this.content = false;
      setTimeout(() => {
        this.factor = true;
      }, 500);
    },
    //点击一级类别某一行的数据
    onRowClick(row, index) {
      this.fristid = row.id;
      this.currentIndex = index;
      console.log(this.fristid, "this.fristpid");
      this.scendtable = row.children;
    },
    //点击二级类别某一行的数据
    secendClick(jobTitle, index) {
      let id = jobTitle.id;
       this.secendid = jobTitle.id;
      this.getscontractListApi(id);
      console.log(this.secendid, "this.fristpid");

    },
   
    //点击合同查询对应的数据
    contentlist(row) {
      let id = row.id;
      this.getsContractInfoApifn(id);
    },
    //新增合同名称和信息
    contentbtn(){
      
    },
    //合同信息info的删除
    async deletecontractListAFn(query) {
      let { code, data } = await deletecontractListApi(query);
      if (code != 200) return;
      this.getsContractInfoApifn(query.id);
      this.$message({
        message: "刪除数据成功",
        type: "success",
      });
    },
    //删除某一条合同信息
    deletinfo(i, index) {
      let query = {
        id: i.id,
        index: index,
      };
      this.deletecontractListAFn(query);
    },
    //新增某一条信息
    async addscontractinfo(item) {
      let content = this.$refs.wangEditor.getEditorDataFn();
      console.log(this.$refs,"this.$refs")
      
      if (content) {
        item.info.push(content);
        console.log(item,"item")
        let { code, msg } = await addscontractListApi(item);
        if (code != 200) return;
        this.$message({
          message: msg,
          type: "success",
        });
        this.getsContractInfoApifn(item.id);
        
      } else {
        this.$message({
          message: "请输入新增信息",
          type: "warning",
        });
      }
    },
    //要素信息查询
    async factorlisttable(row) {
      console.log(row.id, "row");
      let data = {
        id: row.id,
        pageNum: 1,
        pageSize: 10,
      };
      let { rows, code, total } = await getfactorListApi(data);
      if (code != 200) return;
      this.factortable = rows;
      this.pageing.total = total;
      // console.log(this.factortable,"this.factortable")
    },
    // 要素表格行点击
    RowClickFn(row) {
      this.ruleForm = row;
      this.ysid = row.id;
      console.log(this.ysid, "this.ysid");
    },
    //要素信息编辑
    async editfactorListfn() {
      let editForm = this.ruleForm;
      console.log(editForm, "editForm");
      let { code, msg } = await editfactorListApi(editForm);
      if (code == 200) {
        this.$message({
          message: msg,
          type: "success",
        });
        this.factorlisttable(editForm.id);
      } else {
        this.$message({
          message: msg,
          type: "error",
        });
      }
    },
    //删除某一条要素
    async deleteinfo(row) {
      console.log(row, "rowssss");
      if (!this.ysid == "") {
        let id = {
          id: this.ysid,
        };
        let { code, msg } = await deletfactorListApi(id);
        if (code == 200) {
          this.$message({
            message: msg,
            type: "success",
          });
          this.factorlisttable(id);

          this.resetForm();
        }
      } else {
        this.$message({
          message: "请选择一条数据",
          type: "success",
        });
      }
    },

    //编辑提交
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.editfactorListfn();
        } else {
          // this.$message({
          //   message: ,
          //   type: "error",
          // });
          return false;
        }
      });
    },
    //重置
    resetForm() {
      this.ruleForm = {
        element: "",
        keypoint: "",
        synonym: "",
      };
    },

    // 当前页发生改变时
    handleCurrentChange(pageNum) {
      this.pageing.pageSize = pageNum;
      this.factorlisttable();
    },
    // 页容量发生改变
    handleSizeChange(pageSize) {
      this.pageing.pageSize = pageSize;
      this.factorlisttable();
    },
  },
  computed: {
    //左侧下拉框筛选
  },
};
</script>

<style  scoped>
.label-box-content {
  height: 100%;
}
.el-input-number--mini {
  width: 100px;
}
.el-card >>> .top {
  border-bottom: 0;
  padding-top: 0;
}
.el-card >>> .el-card__body {
  position: relative;
  height: 100%;
}
.el-card >>> .el-card__body > div {
  padding-top: 0 !important;
  height: 92%;
  overflow-y: auto;
}
.corrExpert .el-card >>> .el-card__body > div {
  overflow-y: initial;
}

.el-row,
.el-card {
  height: 100%;
  margin-bottom: 0;
}
.label-box-content >>> h1 {
  margin: 0;
  padding: 20px 0 15px 0;
}
.label-box-content >>> .top::after {
  height: 0;
}

/* 左侧菜单 */
.leftMenu {
  margin-bottom: 30px;
}
.el-tag {
  position: relative;
  background-color: #f8f8f8;
  border-color: #f8f8f8;
  height: 40px !important;
  line-height: 40px !important;
  font-size: 16px;
  width: 100%;
  margin-right: 3%;
  margin-bottom: 15px;
  color: #333;
}
.el-tag > p {
  margin: 0;
  display: inline-block;
}
.el-tag > .tag-icon {
  position: absolute;
  width: 30px;
  height: 30px;
  right: 10px;
  top: 5px;
  margin: 0;
}
.el-tag > .tag-icon img {
  width: 30px;
  height: 30px;
  object-fit: cover;
  border-radius: 50%;
  transition: all 0.3s;
}
.el-tag > .tag-icon:hover img {
  transform: scale(1.8);
}
.el-tag .el-input {
  width: 120px;
}
.el-tag .el-input >>> .el-input__inner {
  height: 30px;
  line-height: 30px;
  padding-left: 8px;
  padding-right: 10px;
}

.el-tag.tagActive {
  background-color: #1890ff;
  color: #fff;
}
.el-tag >>> .el-icon-close {
  font-size: 20px;
  height: 20px;
  width: 20px;
  line-height: 20px;
  color: #f56c6c;
}
.el-tag >>> .el-icon-close:hover {
  background-color: #f56c6c;
  color: #fff;
}
.el-table >>> table {
  width: 100% !important;
  table-layout: fixed !important;
  font-size: 16px;
}
.el-table >>> .el-table__body tr.current-row > td {
  background-color: #1890ff;
  color: #fff;
}
.el-table >>> .el-table__header-wrapper {
  margin: 6px 0;
}
.el-table >>> .el-table__header-wrapper th,
.el-table >>> .el-table__fixed-header-wrapper th {
  background-color: #f8f8f8 !important;
  padding: 0;
}
.el-table >>> th.is-leaf,
.el-table >>> td {
  border-bottom: 0;
  padding: 8px 0;
}
.el-table >>> th.is-leaf {
  padding: 4px 0;
}

.el-table::before {
  height: 0;
}
.button-new-tag {
  position: absolute;
  bottom: 0;
  left: 0;
  border: 0;
  display: block;
  width: 100%;
  font-size: 16px;
  padding: 15px 20px;
  background-color: #f8f8f8;
  border-top: 1px solid #e6ebf5;
}
.input-new-tag {
  position: absolute;
  bottom: 0;
  left: 0;
}
.leftMenu .leftSearch {
  position: absolute;
  right: 20px;
  top: 10px;
  z-index: 9;
}
.el-col-24 {
  margin-top: 30px;
  padding-bottom: 20px;
  border-bottom: 1px solid #e6ebf5;
}

/* 左侧菜单 end*/
.infoExpert {
  height: 100%;
  position: relative;
}
.btninfo {
  position: absolute;
  top: 15px;
  right: 20px;
}
.btn{
  /* float:right; */
  margin: 10px 0;
}
.btnrow{
  float: right;
  margin: 10px;
}

.edit-box {
  float: right;
  margin-right: 20px;
}
/* 右侧抽屉 */
.yasuinfo {
  padding: 0 20px;
}
.drawerMain {
  padding: 0 20px;
}
.drawerMain .el-tag {
  width: 100%;
  height: auto !important;
  white-space: initial;
}
.drawerMain .input-new-tag {
  margin-bottom: 15px;
}
.classMode .el-tag {
  width: 30%;
}

.hetongbtn {
  position: absolute;
  bottom: 0;
  left: 0;
  border: 0;
  display: block;
  width: 100%;
  font-size: 16px;
  padding: 15px 20px;
  background-color: #f8f8f8;
  border-top: 1px solid #e6ebf5;
}
</style>